import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hippo_app/models/plant.dart';
import 'package:hippo_app/models/plant_category.dart';
import 'package:hippo_app/values/color_value.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:hippo_app/values/size_value.dart';
import 'package:hippo_app/values/style_value.dart';
import 'package:hippo_app/widgets/app_scaffold/app_scaffold.dart';
import 'package:hippo_app/widgets/ripple_container/ripple_container.dart';

import '../../widgets/app_header/app_header.dart';

class PlantCategoryPage extends StatefulWidget {
  const PlantCategoryPage({super.key});

  @override
  State<PlantCategoryPage> createState() => _PlantCategoryPageState();
}

class _PlantCategoryPageState extends State<PlantCategoryPage> {
  final ScrollController categoryScrollController = ScrollController();
  List<PlantCategory> categoryList = [];
  int selectCategoryIndex = 0;

  final ScrollController scrollController = ScrollController();
  List<Plant> itemList = [];

  void getCategoryDataList() {
    List<PlantCategory> list = [];
    for (int i = 0; i < 20; i++) {
      list.add(PlantCategory());
    }

    setState(() {
      categoryList = list;
    });
  }

  void getItemDataList() {
    List<Plant> list = [];
    for (int i = 0; i < 20; i++) {
      list.add(Plant(id: i.toString()));
    }

    setState(() {
      itemList = list;
    });
  }

  @override
  void initState() {
    super.initState();
    categoryScrollController.addListener(() {
      double scrollOffsetY = categoryScrollController.position.pixels;
      double scrollContentHeight =
          categoryScrollController.position.maxScrollExtent;
      if (scrollOffsetY > scrollContentHeight + 20) {
        getCategoryDataList();
      }
    });

    getCategoryDataList();
    getItemDataList();
  }

  @override
  void dispose() {
    super.dispose();
  }

  toPage(Plant plant) {
    Navigator.pushNamed(context, '/plantView', arguments: plant);
  }

  Widget buildCategory() {
    return Container(
      width: 90,
      decoration: BoxDecoration(color: ColorValue.appBg),
      child: ListView.builder(
        controller: categoryScrollController,
        itemCount: categoryList.length,

        itemBuilder: (context, index) {
          return Container(
            color:
                index == selectCategoryIndex
                    ? Colors.white
                    : Colors.transparent,
            child: RippleContainer(
              onTap: () {
                setState(() {
                  selectCategoryIndex = index;
                });
              },
              child: Container(
                width: 90,
                padding: EdgeInsets.only(
                  left: 10,
                  right: 10,
                  top: 12,
                  bottom: 12,
                ),

                child: Text('百合科$index', style: StyleValue.defaultStyle),
              ),
            ),
          );
        },
      ),
    );
  }

  Widget buildList() {
    return Expanded(
      child: Container(
        padding: EdgeInsets.only(
          left: SizeValue.appContentPadding / 2,
          right: SizeValue.appContentPadding / 2,
          top: SizeValue.appContentPadding / 2,
          bottom: SizeValue.appContentPadding / 2,
        ),
        decoration: BoxDecoration(
          border: Border(
            right: BorderSide(color: ColorValue.appBorderColor, width: 0.8),
          ),
          color: Colors.white,
        ),
        child: ListView.builder(
          controller: scrollController,
          itemCount: itemList.length,
          itemBuilder: (context, index) {
            return Container(
              decoration: BoxDecoration(
                //color: Colors.white,
                border: Border(
                  bottom: BorderSide(
                    color:
                        index < itemList.length - 1
                            ? ColorValue.appBorderColor
                            : Colors.transparent,
                    width: 0.2,
                  ),
                ),
              ),
              child: Container(
                padding: EdgeInsets.only(
                  left: SizeValue.appContentPadding,
                  right: SizeValue.appContentPadding,
                  top: SizeValue.appContentPadding,
                  bottom: SizeValue.appContentPadding,
                ),
                child: Row(
                  children: [
                    InkWell(
                      onTap: (){
                        toPage(itemList[index]);
                      },
                      child: Container(
                        margin: EdgeInsets.only(right: 10),
                        decoration: BoxDecoration(
                          color: ColorValue.appImgBg,
                          borderRadius: BorderRadius.all(Radius.circular(SizeValue.appBorderRadius)),
                        ),
                        child: Image.asset(
                          'assets/images/logo.png',
                          fit: BoxFit.contain,
                          width: 60,
                          height: 70,
                        ),
                      ),
                    ),
                    Expanded(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "重瓣粉色康乃馨",
                            style: StyleValue.homeListItemNameStyle,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 6, bottom: 6),
                            child: Row(
                              mainAxisAlignment:
                              MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  "${AppLocalizations.of(context)!.plantWaterTotalSimpleLabel}:999",
                                  style: StyleValue.homeListItemTotalStyle,
                                  maxLines: 1,
                                  overflow: TextOverflow.ellipsis,
                                ),
                                Container(
                                  margin: EdgeInsets.only(bottom: 1),
                                  width: 18,
                                  height: 18,
                                  child: OutlinedButton(
                                    style: OutlinedButton.styleFrom(
                                      padding: EdgeInsets.symmetric(
                                        vertical: 0,
                                        horizontal: 0,
                                      ),
                                      minimumSize: Size(18, 18),
                                      maximumSize: Size(18, 18),
                                      foregroundColor: Colors.white,
                                      backgroundColor:
                                      ColorValue.appPrimaryColor,
                                      side: BorderSide(
                                        color: ColorValue.appPrimaryColor,
                                        width: 0.5,
                                      ),
                                    ),
                                    onPressed: () {},
                                    child: Icon(Icons.add),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                "${AppLocalizations.of(context)!.plantFertilizerTotalSimpleLabel}:999",
                                style: StyleValue.homeListItemTotalStyle,
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                              Container(
                                margin: EdgeInsets.only(top: 1),
                                width: 18,
                                height: 18,
                                child: OutlinedButton(
                                  style: OutlinedButton.styleFrom(
                                    padding: EdgeInsets.symmetric(
                                      vertical: 0,
                                      horizontal: 0,
                                    ),
                                    minimumSize: Size(18, 18),
                                    maximumSize: Size(18, 18),
                                    foregroundColor:
                                    ColorValue.appPrimaryColor,
                                    backgroundColor: Colors.transparent,
                                    side: BorderSide(
                                      color: ColorValue.appPrimaryColor,
                                      width: 0.5,
                                    ),
                                  ),
                                  onPressed: () {},
                                  child: Icon(Icons.add),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  Widget buildHeaderCard(BuildContext context) {
    return AppHeader(
      appBar: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            AppLocalizations.of(context)!.plantCategoryPageTitle,
            style: StyleValue.appBarTitleStyle,
          ),
        ],
      ),
    );
  }

  Widget buildMain(BuildContext context) {
    return Expanded(
      child: MediaQuery.removePadding(
        removeTop: true,
        context: context,
        child: Row(children: [buildCategory(), buildList()]),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return AppScaffold(
      body: Column(children: [buildHeaderCard(context), buildMain(context)]),
    );
  }
}
